<template>
  <p>{{ num }}</p>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';

  const sleep = (time: number): Promise<void> => {
    return new Promise(resolve => setTimeout(resolve, time));
  };

  export default defineComponent({
    name: 'AsyncNumber',
    setup: async () => {
      await sleep(2000);
      const n = Math.random();
      const num = ref(0);
      num.value = n;
      if (n > 0.5) {
        return { num: n };
      } else {
        throw new Error('异步请求出错');
      }
    }
  });
</script>

<style scoped></style>
